<template>
    <div class="measure">
        <svg-icon v-for="icon in icons" 
            :icon="icon" 
            :name="icon" 
            :width="'25px'" 
            :height="'25px'" 
            @click="iconClick(icon)"
            class="icon"></svg-icon>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import SvgIcon from './SvgIcon.vue';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Draw from 'ol/interaction/Draw';
import { getLength, getArea } from 'ol/sphere';
import { Overlay } from 'ol';

const props = defineProps({
    map: {
        type: Object,
        required: true
    }
})

const icons = ref([
    'area',
    'distance',
    'del'
])
let draw = null;
// 绘制提示
let measureTooltip;
let measureTooltipElement;
let measureTooltipOverLay;
// 绘制图层
const source = new VectorSource();
const vectorLayer = new VectorLayer({
    source: source,
    // 最后成果样式
    style: {
        'fill-color': 'rgba(255, 255, 255, 0.2)',
        'stroke-color': '#ffcc33',
        'stroke-width': 2,
    },
})
props.map.addLayer(vectorLayer)
// 加入地图
const iconClick = (icon) => {
    let type;
    if(draw) {
        props.map.removeInteraction(draw);
        
    }
    
    if (icon === 'del') {
        vectorLayer.getSource().clear();
        props.map.removeOverlay(measureTooltipOverLay);
    } else { 
        type = icon === 'area' ? 'Polygon' : 'LineString';
        addInteraction(type)
    }
}

let sketch = null;
function addInteraction(type) {
    draw = new Draw({
        source: source,
        type: type
    });
    props.map.addInteraction(draw);
    createMeasureToolTip()
    // 开始绘制
    draw.on('drawstart', function (evt) {
        sketch = evt.feature;
        // 监听绘制几何的变化
        let output = '';
        sketch.getGeometry().on('change', function (evt) {
            let geom = evt.target;
            let output;
            if (type === 'Polygon') {
                output = formatArea(geom);
                console.log('output', output)
                let tooltipCoord = geom.getInteriorPoint().getCoordinates();
                measureTooltipElement.innerHTML = formatArea(geom);
                measureTooltipOverLay.setPosition(tooltipCoord);
            } else {
                let tooltipCoord = geom.getLastCoordinate()
                measureTooltipElement.innerHTML = formatLength(geom);
                measureTooltipOverLay.setPosition(tooltipCoord);
            }
        });
    });
    // 结束绘制
    draw.on('drawend', function () {
        props.map.removeInteraction(draw);
    });
}
// 创建测量结果面板
const createMeasureToolTip = () => {
    measureTooltipElement = document.createElement('div');
    measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
    measureTooltipOverLay = new Overlay({
      element: measureTooltipElement,
      offset: [0, -15],
      positioning: 'bottom-center',
      stopEvent: false,
      insertFirst: false,
    });
    props.map.addOverlay(measureTooltipOverLay);
}
// 计算
const formatLength = (line) => {
    let output;
    const length = getLength(line);
    if (length > 100) {
        output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km';
    } else {
        output = Math.round(length * 100) / 100 + ' ' + 'm';
    }
  return output;
}
const formatArea = (polygon) => {
    const area = getArea(polygon);
    let output;
    if (area > 10000) {
        output = Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>';
    } else {
        output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>';
    }
    return output;
}
</script>

<style scope>
.measure{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 9999;
    background-color: rgba(0.2, 0.2, 0.2, 0.2);
    border-radius: 6px;
}
.icon {
    margin: 10px;
}

</style>